<template>
  <div id="app">
  <p @click="add(a)"> {{num}}</p>
  </div>
</template>

<script>



export default {
  methods: {
    add(){
    this.a++
    }
  },
  data() {
   return {
     a:10,
     b:20
   }
  },
  computed:{
    //计算属性和data属性都是变量不能重名
    //变量改变实时更新
    num(){
      return this.a+this.b
    }
  }

};
</script>

<style >
.red{
  color: red;
}
</style>